irongit
Sign inRegister
huncholanehuncholane/dotbarPublic

Waybar configuration

dotbar/style/[Colored] Translucent.css
347 lines5.8 KBCSS
RawDownloadHistory
1/* ---- 💫 https://github.com/JaKooLit 💫 ---- */
2/* Translucent */
3
4@define-color critical #ff0000; /* critical color */
5@define-color warning #f3f809; /* warning color */
6@define-color fgcolor #ffffff; /* foreground color */
7@define-color bgcolor #303030; /* background color */
8@define-color bgcolor #222436; /* background color */
9@define-color alert #df3320;
10
11@define-color accent1 #ff7a93;
12@define-color accent2 #b9f27c;
13@define-color accent3 #ff9e64;
14@define-color accent4 #bb9af7;
15@define-color accent5 #7da6ff;
16@define-color accent6 #0db9d7;
17
18* {
19font-family: "JetBrainsMono Nerd Font";
20font-weight: bold;
21min-height: 0;
22/* set font-size to 100% if font scaling is set to 1.00 using nwg-look */
23font-size: 97%;
24font-feature-settings: '"zero", "ss01", "ss02", "ss03", "ss04", "ss05", "cv31"';
25}
26
27window#waybar {
28 background-color: rgba(0,0,0,0.3);
29 color: #ffffff;
30 transition-property: background-color;
31 transition-duration: .5s;
32 border-radius: 10px;
33}
34
35window#waybar.hidden {
36 opacity: 0.1;
37}
38
39tooltip {
40 background: #1e1e2e;
41 opacity: 0.6;
42 border-radius: 10px;
43 border-width: 2px;
44 border-style: solid;
45 border-color: #11111b;
46}
47
48#taskbar button,
49#workspaces button {
50 background-color: transparent;
51 color: #ffffff;
52 box-shadow: none;
53 text-shadow: none;
54 padding: 4px;
55 border-radius: 9px;
56 animation: gradient_f 20s ease-in infinite;
57 transition: all 0.5s cubic-bezier(.55,-0.68,.48,1.682);
58}
59
60#taskbar button.active,
61#workspaces button.active {
62 background-color: transparent;
63 color: @accent1;
64 padding-left: 8px;
65 padding-right: 8px;
66 animation: gradient_f 20s ease-in infinite;
67 transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682);
68}
69
70#taskbar button:hover,
71#workspaces button:hover {
72 background: rgba(0, 0, 0, 0.2);
73 color: @accent3;
74 padding-left: 2px;
75 padding-right: 2px;
76 animation: gradient_f 20s ease-in infinite;
77 transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682);
78}
79
80#workspaces button.focused {
81 background-color: #bbccdd;
82 color: @accent2;
83 /* box-shadow: inset 0 -3px #ffffff; */
84}
85
86#workspaces button.urgent {
87 background-color: #eb4d4b;
88}
89
90#mode {
91 background-color: #64727D;
92 border-bottom: 3px solid #ffffff;
93}
94
95#backlight,
96#backlight-slider,
97#battery,
98#bluetooth,
99#clock,
100#cpu,
101#disk,
102#idle_inhibitor,
103#keyboard-state,
104#memory,
105#mode,
106#mpris,
107#network,
108#power-profiles-daemon,
109#pulseaudio,
110#pulseaudio-slider,
111#taskbar,
112#temperature,
113#tray,
114#window,
115#wireplumber,
116#workspaces,
117#custom-backlight,
118#custom-browser,
119#custom-cava_mviz,
120#custom-cycle_wall,
121#custom-dot_update,
122#custom-file_manager,
123#custom-keybinds,
124#custom-keyboard,
125#custom-light_dark,
126#custom-lock,
127#custom-hint,
128#custom-hypridle,
129#custom-menu,
130#custom-playerctl,
131#custom-power_vertical,
132#custom-power,
133#custom-quit,
134#custom-reboot,
135#custom-settings,
136#custom-spotify,
137#custom-swaync,
138#custom-tty,
139#custom-updater,
140#custom-weather,
141#custom-weather.clearNight,
142#custom-weather.cloudyFoggyDay,
143#custom-weather.cloudyFoggyNight,
144#custom-weather.default,
145#custom-weather.rainyDay,
146#custom-weather.rainyNight,
147#custom-weather.severe,
148#custom-weather.showyIcyDay,
149#custom-weather.snowyIcyNight,
150#custom-weather.sunnyDay {
151 padding-top: 4px;
152 padding-bottom: 4px;
153 padding-right: 6px;
154 padding-left: 6px;
155}
156
157/* If workspaces is the leftmost module, omit left margin */
158.modules-left > widget:first-child > #workspaces {
159}
160
161/* If workspaces is the rightmost module, omit right margin */
162.modules-right > widget:last-child > #workspaces {
163}
164
165#clock {
166 color: @accent2;
167}
168
169#custom-updater {
170 color: #7287fd;
171}
172
173#battery {
174 color: @accent5;
175}
176
177/* #battery.charging {
178 color: #ffffff;
179 background-color: #26A65B;
180} */
181
182@keyframes blink {
183 to {
184 background-color: #ffffff;
185 color: #333333;
186 }
187}
188
189#battery.critical:not(.charging) {
190 color: @critical;
191 animation-name: blink;
192 animation-duration: 3.0s;
193 animation-timing-function: steps(12);
194 animation-iteration-count: infinite;
195 animation-direction: alternate;
196}
197
198label:focus {
199 background-color: #000000;
200}
201
202#custom-menu{
203 color: #FFFFFF;
204 /*padding: 3px;*/
205}
206
207#custom-keyboard,
208#cpu {
209 color: @accent1;
210}
211
212#memory {
213 color: @accent3;
214}
215
216#backlight {
217 color: #cdd6f4;
218}
219
220#bluetooth {
221 color: #1e66f5;
222}
223
224#network {
225 color: @accent3;
226}
227
228#network.disconnected {
229 color: @alert;
230}
231
232#pulseaudio {
233 color: @accent4;
234}
235
236#pulseaudio-muted {
237 color: @accent2;
238}
239#wireplumber {
240 color: @accent4;
241}
242
243#wireplumber-muted {
244 color: @accent2;
245}
246
247#pluseaudio-source-muted{
248 color: #a0a0a0;
249}
250
251#custom-power {
252 color: #cc3436;
253}
254
255#disk {
256 color: @accent5;
257}
258#custom-power_profile {
259 color: @accent3;
260}
261#custom-media {
262 background-color: #66cc99;
263 color: #2a5c45;
264 min-width: 100px;
265}
266
267#custom-weather {
268 color: #66cc99;
269}
270
271#custom-lock {
272 color: #ffa000;
273}
274
275#keyboard-state,
276#temperature {
277 color: @accent6;
278 /* background-color: #f0932b; */
279}
280
281#temperature.critical {
282 background-color: @critical;
283}
284
285#tray {
286 /* background-color: #505050; */
287}
288
289#custom-hypridle,
290#idle_inhibitor {
291 color: #f9e2af;
292 /*background-color: #2d3436;*/
293}
294
295/*-----Indicators----*/
296#custom-hypridle.notactive,
297#idle_inhibitor.activated {
298 color: #39FF14;
299}
300
301#mpd {
302 color: #2a5c45;
303}
304
305#mpd.disconnected {
306 background-color: #f53c3c;
307}
308
309#mpd.stopped {
310 background-color: #90b1b1;
311}
312
313#mpd.paused {
314 background-color: #51a37a;
315}
316
317#custom-language {
318 color: @accent5;
319 min-width: 16px;
320}
321
322#custom-separator {
323 color: #606060;
324}
325
326#backlight-slider slider,
327#pulseaudio-slider slider {
328 min-width: 0px;
329 min-height: 0px;
330 opacity: 0;
331 background-image: none;
332 border: none;
333 box-shadow: none;
334}
335
336#backlight-slider trough,
337#pulseaudio-slider trough {
338 min-width: 80px;
339 min-height: 5px;
340 border-radius: 5px;
341}
342
343#backlight-slider highlight,
344#pulseaudio-slider highlight {
345 min-height: 10px;
346 border-radius: 5px;
347}